import * as THREE from 'three';
import { CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer.js';
import { provinceData } from './provinceData.js';
// 省会城市对象
const provinceNameObj = {};
// 光圈数组
const apertureArr = [];

function createProvinceName () {
    provinceData.map((item, index) => {
        const dom = document.getElementById('provinceName').cloneNode();
        dom.innerHTML = item.name;
        const css3DObject = new CSS3DObject(dom);
        css3DObject.name = '省份名称'
        dom.style.pointerEvents = 'none';
        css3DObject.position.set(item.x, -item.y, 0);
        css3DObject.scale.set(0.15, 0.15, 0.15);
        provinceNameObj[item.name] = css3DObject;
        const apertureMesh = createAperture(index);
        css3DObject.add(apertureMesh);
    })
}

// 创建光圈
function createAperture (index) {
    // 创建纹理贴图
    const textureLoader = new THREE.TextureLoader();
    // 创建平面矩形
    const apertureGeometry = new THREE.PlaneGeometry(2, 2);
    // 创建材质开启透明设置纹理贴图
    const apertureMaterial = new THREE.MeshBasicMaterial({
        map: textureLoader.load('./light.png'),
        transparent: true,
        color: '#00CDCD',
        depthWrite: false,
        // depthTest: false,
    })
    const apertureMesh = new THREE.Mesh(apertureGeometry, apertureMaterial);
    apertureMesh.position.z += 1;
    apertureMesh.name = '光圈';
    //  创建光圈时2-5倍随机放大
    let size = Math.random() * 15 + 10;
    apertureMesh.scale.set(size, size, size);
    // 保存这个随机放大倍数
    apertureMesh._s = size;
    // 设置模型渲染顺序，避免起冲突
    apertureMesh.renderOrder = index + 1;
    apertureArr.push(apertureMesh);
    return apertureMesh
}

export { createProvinceName, provinceNameObj, apertureArr };
